<template>
    <div class="country-name-item">
       <slot></slot>
    </div>
</template>

<script lang="ts" setup>
</script>

<style scoped>
.country-name-item {
    font-weight: 500;
    font-size: min(var(28px, 2.5vw), 24px);
    padding: 0.3vh 0.5vw;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    border-radius: 3px;
    border: gold 1px solid;
    text-shadow: 0px 0px 5px rgb(255, 255, 255, 0.5), 1px 1px 1px #333, -1px -1px 1px #333;
    background-color: rgb(200, 40, 0);
    background-image: repeating-radial-gradient(circle at 0% 0%, black 1px, transparent 2px);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
    position: relative;
}

.country-name-item::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: repeating-radial-gradient(circle at 0% 0%, red 10px, yellow 20px);
    background-size: cover;
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0.4;
    pointer-events: none;
    inset: 0;
}
</style>